<template>
  <div class="quota_template">
    <!-- 文件 -->
    <div class="file">
      <draggable :title="'定额模板创建管理'" @clickItem="handelAddEngTypeList"></draggable>
    </div>
    <!-- 点击子文件的列表 -->
    <div class="content">
      <div class="sp_list">
        <draggableEngTypeList
          :list="data.engTypeList"
          :item="data.choseItem"
          @addEngTypeList="handelAddEngTypeLists"
          @getTableList="handelGetTableList"
          @serch="handelSerch"
        ></draggableEngTypeList>
      </div>
      <!-- 新增定额 -->
      <div class="de_tabel">
        <quotaTable
          ref="quotaTableRef"
          :list="data.quotaTableList"
          :projectId="data.projectId"
          @updateList="getUpdateList"
        ></quotaTable>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, defineEmits, ref } from "vue";
import draggable from "./draggable.vue";
import draggableEngTypeList from "./draggableEngTypeList.vue";
import quotaTable from "./quotaTable.vue";
// api
import { getProject, quotaTemplateList } from "@/apis/createFile/index.js";
// 变量定义
const quotaTableRef = ref();
const data = reactive({ engTypeList: [], choseItem: {}, quotaTableList: [], projectId: "" });
const emits = defineEmits(["getList"]);
// 方法定义
// 获取选中的数据
const getUpdateList = list => {
  emits("getList", list);
};
const handelAddEngTypeList = item => {
  // alert(1)
  quotaTableRef.value.reset();
  console.log(item, "点击子文件获取的列表");
  data.choseItem = item;
  let projectName = "";
  getProject(item.folderId, projectName).then(res => {
    res.data.map(it => {
      it.isStatus = it.status == 0 ? false : true;
    });
    console.log(res, "000000");

    data.engTypeList = res.data;
  });
};
const handelSerch = v => {
  console.log(v, "搜索的字符");
  let projectName = v;
  getProject(data.choseItem.folderId, projectName).then(res => {
    res.data.map(it => {
      it.isStatus = it.status == 0 ? false : true;
    });
    data.engTypeList = res.data;
  });
};
const handelAddEngTypeLists = item => {
  handelAddEngTypeList(data.choseItem);
};
// 获取定额表格数据
const handelGetTableList = item => {
  data.projectId = item.projectId;
  quotaTemplateList(item.projectId)
    .then(res => {
      if (res.code == 200) {
        res.data.map(it => {
          if (it.unit !== null) {
            console.log("1111");
            it.unit = it.unit.toString();
          } else {
            // it.unit = it.unit.toString();
          }
          it.isStatus = it.quotaState == 0 ? false : true;
        });
        data.quotaTableList = res.data;
      }
    })
    .catch(err => {
      data.quotaTableList = [];
      console.log(err, "错误");
    });
};
// 生命周期
// 监听
</script>
<style scoped lang="scss">
.quota_template {
  //   background-color: #e3f0fe;
  height: calc(100vh - 102px);
  display: flex;
  flex-direction: row;
  .file {
    // flex: 1;
    border-right: 1px solid #c2d4e8;
    box-sizing: border-box;
    .draggable_content {
      padding: 20px 0;
      box-sizing: border-box;
      height: calc(100% - 10px);
      .content {
        height: 100%;
        margin-top: 0 !important;
      }
    }
  }
  .content {
    // flex: 2;
    // background-color: rgb(255, 255, 255);
    // margin-left: 20px;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    height: 100%;
    display: flex;
    :deep(.draggable_content) {
      padding: 20px 0;
      .header {
        padding: 0 20px;
      }
      .content {
        height: calc(100% - 40px);
        overflow-y: auto;
      }
    }
    .sp_list {
      height: 100%;
    }
    .de_tabel {
      height: 100%;
      padding: 20px;
      overflow: hidden;
      box-sizing: border-box;
      width: 100%;
    }
  }
}
</style>
